<template>
	<view>
		<view class="content">
			<view class="items">
				<view class="left-label">
					发票类型
				</view>
				<view class="right-btn items-center">
					<view @click="isType = 0" :class="['btn',{active:isType == 0}]">
						普通发票
					</view>
					<view @click="isType = 1" :class="['btn',{active:isType == 1}]">
						增值税专用发票
					</view>
				</view>
			</view>
			<view class="items" v-if="isType == 0">
				<view class="left-label">
					抬头类型
				</view>
				<view class="right-btn items-center">
					<view @click="isHeadType = 0" :class="['btn',{active:isHeadType == 0}]">
						个人
					</view>
					<view @click="isHeadType = 1" :class="['btn',{active:isHeadType == 1}]">
						单位
					</view>
				</view>
			</view>
			<view class="items">
				<view class="left-label">
					发票抬头
				</view>
				<view class="right-btn">
					<input type="text" v-model="form.title" placeholder="请输入发票抬头">
				</view>
			</view>
			<view class="items">
				<view class="left-label">
					邮箱
				</view>
				<view class="right-btn">
					<input type="text" v-model="form.f" placeholder="请输入邮箱">
				</view>
			</view>
			<template v-if="isHeadType == 1 || isType == 1">
				<view class="items">
					<view class="left-label">
						单位税号
					</view>
					<view class="right-btn">
						<input type="text" v-model="form.num" placeholder="请输入单位税号">
					</view>
				</view>
				<view class="items">
					<view class="left-label">
						注册地址
					</view>
					<view class="right-btn">
						<input type="text" v-model="form.address" placeholder="选填">
					</view>
				</view>
				<view class="items">
					<view class="left-label">
						注册电话
					</view>
					<view class="right-btn">
						<input type="text" v-model="form.phone" placeholder="选填">
					</view>
				</view>
				<view class="items">
					<view class="left-label">
						开户银行
					</view>
					<view class="right-btn">
						<input type="text" v-model="form.bank" placeholder="选填">
					</view>
				</view>
				<view class="items">
					<view class="left-label">
						银行账号
					</view>
					<view class="right-btn">
						<input type="text" v-model="form.bankNum" placeholder="选填">
					</view>
				</view>
			</template>
		</view>
		<view class="foot">
			<view class="btn" @click="submitFn">
				提交
			</view>
			<view class="btn btn-1" @click="handleDel" v-if="form.id">
				删除
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isType:0,
				isHeadType:0,
				form:{},
				type:''
			};
		},
		onLoad(e) {
			if(e.title) this.setNavTitle(e.title)
			if(e.type) this.type = e.type
			if(e.type == '2') {
				this.form = getApp().globalData.invoiceInfo
				this.isType = this.form.type
				this.isHeadType = this.form.titleType
			}
		},
		onUnload() {
			getApp().globalData.invoiceInfo = {}
		},
		methods:{
			handleDel(){
				if(!this.form.id) return this.$util.msg('当前内容不可删除')
				uni.showModal({
					content:'删除后不可恢复,是否删除',
					success:(e)=>{
						if(e.confirm){
							this.delFn()
						}
					}
				})
			},
			async submitFn(){
				if(!this.form.title) return this.$util.msg('请填写发票抬头');
				if(!this.form.f) return this.$util.msg('请填写发票邮箱');
				if(this.isHeadType == 1 && !this.form.num) return this.$util.msg('请填写发票税号');
				this.form.type = this.isType
				this.form.titleType = this.isHeadType
				let data = {
					uid:uni.getStorageSync('uid'),
					...this.form
				}
				let res = await this.$request('user/add-invoice',data,{ showLoading: true })
				if(res.result == '0'){
					this.form.id ? this.$util.msg('修改成功') : this.$util.msg('添加成功')
					this.prePage().refresh()
					this.back()
				}else{
					this.$util.msg(res.resultNote);
				}
			},
			async delFn(){
				let data = {
					id:this.form.id
				}
				let res = await this.$request('user/del-invoice',data,{ showLoading: true })
				if(res.result == '0'){
					this.$util.msg('删除成功')
					this.prePage().refresh()
					this.back()
				}else{
					this.$util.msg(res.resultNote);
				}
			}
		},
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped> 
	.content{
		padding: 30rpx;
		.items{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E7E7E7;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left-label{
				width: 30%;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				white-space:nowrap;
			}
			.right-btn{
				width: 65%;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F5F5F5;
					border-radius: 33rpx;
					padding: 15rpx 30rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #999999;
					margin-right: 20rpx;
				}
				.active{
					border: 2rpx solid $uni-color-bg;
					color: $uni-color-bg;
					background-color: #fff;
				}
			}
		}
	}
	.foot{
		margin-top: 50rpx;
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
		}
		.btn-1{
			background: #FFF;
			border: 2rpx solid $uni-color-bg;
			color: $uni-color-bg;
			margin-top: 20rpx;
		}
	}
</style>
